<template>
	<view class="box">
		<view class="font_35 text_bold title">{{date_times}}前可免费取消订单</view>
		<view class="wrapper hidden">
			<view class="font_35 text_bold wrapper_title">退款总额</view>
			<view class="font_62 text_bold color_ff6a00 wrapper_price">¥ {{all_price}}</view>
			<view class="font_27 color_7b wrapper_des">取消订单后，退款将于24小时内退回您的微信账户.</view>
		</view>
		<view class="content hidden">
			<view class="content_top font_35 text_bold">退款明细</view>
			<view class="bg_fff font_27 color_7b hidden">
				<view class="flex8 content_list">
					<view>订单金额：</view>
					<view>¥ {{order_price}}</view>
				</view>
				<view class="flex8 content_list">
					<view>违约金额：</view>
					<view>- ¥ {{break_price}}</view>
				</view>
			</view>
		</view>
		<view class="bg_fff hidden foot">
			<view class="btn2" @click="get_btn">取消订单</view>
		</view>
	</view>
</template>

<script>
	// 需后台审核
	export default {
		data() {
			return {
				id: '',
				date_times: '',
				all_price: '', // 总额
				order_price: '', // 订单金额
				break_price: '0.00', // 违约金
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getBaseConfig();
		},
		methods: {
			// 小程序基本配置
			getBaseConfig() {
				this.$http.get(this.$api.getBaseConfig).then(res => {
					this.get_detail(res);
				})
			},
			// 详情
			get_detail(e) {
				this.$http.get(this.$api.getMyOrdersDetail, {
					order_id: this.id
				}).then(res => {
					this.date_times = res.data.start_time + ' ' + e.data.times + ':00 ';
					this.order_price = res.data.pocket_price;

					let free_times = res.data.start_time.replace(/年|月/g, "-") + ' ' + e.data.times + ':00';
					let free_times_s = Date.parse(new Date(free_times)) // 免费的时间戳
					let now_s = Date.parse(new Date()); // 当前时间戳

					if (now_s > free_times_s) {
						// 付违约金
						this.break_price = Number(res.data.pocket_price) * (Number(e.data.service_charge) / 100);
						this.break_price = this.break_price.toFixed(2);

						this.all_price = Number(res.data.pocket_price) - this.break_price;
						this.all_price = this.all_price.toFixed(2);
					} else {
						// 免费
						this.all_price = res.data.pocket_price;
					}
				})
			},
			// 取消订单
			get_btn() {
				let self = this;

				uni.showModal({
					title: '提示',
					content: '确定取消订单吗',
					success: function(res) {
						if (res.confirm) {
							// 确定
							getApp().get_loading();
							self.get_refund();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			get_refund() {
				this.$http.get(this.$api.refund, {
					order_id: this.id
				}).then(res => {
					getApp().get_msg('提交成功，待后台审核，请耐心等待');
					getApp().get_back();
					// uni.setStorageSync('orderList', true);
				})
			}
		}
	}
</script>

<style lang="less">
	.box {
		padding-bottom: 160rpx;
		box-sizing: border-box;
	}

	.title {
		margin: 31rpx 31rpx 33rpx;
	}

	.wrapper {
		width: 688rpx;
		margin: 0 auto;
		border-radius: 12rpx;
		box-shadow: 0px 6rpx 12rpx rgba(221, 221, 221, 0.61);

		.wrapper_title {
			margin: 46rpx 27rpx 29rpx;
		}

		.wrapper_price {
			margin: 0 42rpx 21rpx;
		}

		.wrapper_des {
			margin: 0 27rpx 133rpx;
		}
	}

	.content {
		width: 688rpx;
		margin: 29rpx auto;
		border-radius: 12rpx;
		box-shadow: 0px 6rpx 12rpx rgba(221, 221, 221, 0.6);

		.content_top {
			padding: 33rpx 31rpx;
			background-color: #F9FBFB;
		}

		.content_list {
			margin: 31rpx 31rpx;
		}
	}

	.foot {
		bottom: 0;
		width: 100%;
		position: fixed;
		padding: 15rpx 0 50rpx;
		box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.16);
	}
</style>
